<template>
    <div class="dao_hang">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>居家</el-breadcrumb-item>
          </el-breadcrumb>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
.dao_hang{
    width: 1240px;
    height: 72px;
    display: flex; // 使用 Flex 布局
    align-items: center; // 在交叉轴上居中
    .el-breadcrumb {
        flex: 1; // 让面包屑导航占据剩余空间
        margin-left: 20px; // 添加左侧边距，根据需要调整
    }

    .el-breadcrumb-item {
        a {
            color: #333; // 修改链接颜色，根据需要调整
        }

        &:hover {
            color: #409eff; // 修改鼠标悬停时的颜色，根据需要调整
        }

        &.is-active {
            color: #409eff; // 修改当前激活项的颜色，根据需要调整
        }
    }

    .el-icon-arrow-right {
        color: #909399; // 修改分隔符的颜色，根据需要调整
    }

}
</style>

